<script setup lang="ts">
	import { ref } from "vue";
	import { formRules } from "./utils/rule";
	import { FormProps } from "./utils/types";
	import { useUserStoreHook } from "@/store/modules/user";
	import { UploadPut } from "@/api/common/upload";
	import { message } from "@/utils/message";

	/** TODO 有其他方式  来换掉这个props 父子组件传值吗？ */
	const props = withDefaults(defineProps<FormProps>(), {
		formInline: () => ({
			noticeTitle: "",
			noticeType: "",
			status: "",
			noticeContent: "",
			imgUrl: ""
		})
	});

	const noticeData: any = ref(props.formInline);
	const fileList = noticeData.value?.imgUrl.split(',').filter((v) => v).map((v) => {
		return {
			url: v
		}
	});
	
	const formRuleRef = ref();



	function getFormRuleRef() {
		return formRuleRef.value;
	}

	function beforeUpload(file) {
		const isJPGPNG = file.type === 'image/jpeg' || file.type === 'image/png';
		const isLt500K = file.size / 1024 / 1024 < 0.5;

		if (!isJPGPNG) {
			message(`上传头像图片只能是 JPG/PNG 格式!`, {
			  type: "warning"
			});
			return false;
		}
		if (!isLt500K) {
			message(`上传头像图片大小不能超过 500KB!`, {
			  type: "warning"
			});
			return false;
		}
		return true;
	}
	async function handleUpload(request) {
		const file = request.file;
		try {
			const d = await UploadPut({
				file
			})
			noticeData.value.imgUrl = d.url
			message(`文件上传成功`, {
			  type: "success"
			});
		} catch {
			noticeData.value.imgUrl = ""
			message(`文件上传失败`, {
			  type: "error"
			});
		}
		
	}
	
	function handleUploadRemove(uploadFile, uploadFiles) {
		noticeData.value.imgUrl = ""
	}
 
	defineExpose({ getFormRuleRef });
</script>

<template>
	<el-form ref="formRuleRef" :model="noticeData" :rules="formRules" label-width="82px">
		<el-form-item label="公告标题" prop="noticeTitle">
			<el-input v-model="noticeData.noticeTitle" clearable placeholder="请输入公告标题" />
		</el-form-item>

		<el-form-item label="公告类型" prop="noticeType">
			<el-select v-model="noticeData.noticeType" placeholder="请选择类型" clearable class="!w-[180px]">
				<el-option v-for="dict in useUserStoreHook().dictionaryList[
            'sysNotice.noticeType'
          ]" :key="dict.value" :label="dict.label" :value="dict.value" />
			</el-select>
		</el-form-item>
		<el-form-item label="公告类型" prop="status">
			<el-select v-model="noticeData.status" placeholder="请选择状态" clearable class="!w-[180px]">
				<el-option v-for="dict in useUserStoreHook().dictionaryList['sysNotice.status']" :key="dict.value"
					:label="dict.label" :value="dict.value" />
			</el-select>
		</el-form-item>

		<el-form-item label="公告封面" prop="imgUrl">
			<el-upload v-model:file-list="fileList" list-type="picture" :limit="1" :http-request="handleUpload" :before-upload="beforeUpload" :on-remove="handleUploadRemove">
				<el-button size="small" type="primary">点击上传</el-button>
				<div slot="tip" style="margin-left: 5px">只能上传jpg/png文件，‌且不超过500kb</div>
			</el-upload>
		</el-form-item>

		<el-form-item label="公告内容" prop="noticeContent">
			<el-input v-model="noticeData.noticeContent" clearable placeholder="请输入公告内容" rows="6" type="textarea" />
		</el-form-item>
	</el-form>
</template>